<template>
  <div class="main">
    <div class="head">

    </div>
    <div class="body">
      <div class="left">
        <el-table
            :data="messagesList"
            height="510"
            style="width: 100%"
            border
        >
          <el-table-column prop="title" label="标题" width="300" />
          <el-table-column prop="publisherName" label="发布人" />
          <el-table-column prop="releaseTime" label="发布时间" width="200" />
          <el-table-column prop="content" label="发布内容" width="345" />
        </el-table>
      </div>
<!--      右侧信息表单-->
      <div class="right">
        <el-form :model="messageForm" label-width="120px">
          <el-form-item>
            <h2>信息推送</h2>
          </el-form-item>
          <el-form-item label="信息标题">
            <el-input v-model="messageForm.title" />
          </el-form-item>
          <el-form-item label="信息内容">
            <el-input v-model="messageForm.content" type="textarea" />
          </el-form-item>
          <el-form-item label="添加照片">
            <input
                class="file"
                name="image"
                id="image"
                type="file"
                @change="handleUploadImage($event)"
            />
          </el-form-item>
          <el-form-item>
            <el-image :src="messageForm.imgUrl" style="width: 300px;height:auto" fit="cover"></el-image>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">推送</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="foot">

    </div>
  </div>
</template>

<script>
import {addMessage, getAllMessagesList} from "../../api/message";
export default {
  name: "MessageSetting",
  data(){
    return {
      messageForm:{
        title:'',
        content:'',
        imgUrl:'',
        publisherId:this.$store.state.user.id,
      },
      //全部通知信息
      messagesList:[],
    }
  },
  created() {
    this.loadingMessagesList();
  },
  methods:{
    //信息推送按钮
    onSubmit(){
        addMessage(this.messageForm).then(res=>{
          if(res.message==="新增成功")
          {
            this.$notify({
              title: '成功',
              message: "信息发布成功",
              type: 'success'
            });
            window.history.go(0);
          }
        })
    },
    handleUploadImage(e) {
      // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append('file', file, file.name);
      this.$axios.post("/image/uploadImage", param, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }).then(success => {
        this.messageForm.imgUrl = success.data.data
      }).catch(fail => {
        this.$notify({
          title: '失败',
          message: fail,
          type: 'error'
        });
      })
    },
    //加载所有信息列表
    loadingMessagesList(){
      getAllMessagesList().then(res => {
        this.messagesList = res.data;
      })
    }
  }
}
</script>

<style scoped>
.main {
  display: flex;
  flex-direction: column;
}
.body {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.left {
  display: flex;
  margin-top: 20px;
  margin-right: 5px;
}
.right {
  margin-top: 20px;
  display: flex;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.15); /* 灰色 */
  justify-content: center;
  padding-right: 40px;
}
</style>